import { defineComponent, onMounted, reactive, ref } from "vue";
import { useRoute } from 'vue-router'
import Scroll from '../../Scroll'
import { getSingerInfoRequest } from "../../../api/api";
import './style.scss'

export default defineComponent({
  name: 'SingerDetail',
  setup() {
    const scrollRef = ref(null)
    const imgWrapper = ref(null)
    const route = useRoute()
    const { id } = route.params
    const state = reactive({
      artist: {},
      hotSongs: [],
      height: 0
    })

    const refreshList = (height) => {
      state.height = height || imgWrapper.value.clientHeight
      scrollRef.value.refresh()
    }

    const renderHostSongs = () => state.hotSongs.map((item, index) => (
      <li>
        <span className="index">{ index + 1 }</span>
        <div className="music">
          <span>{ item.name }</span>
          <span>{ item.ar[0].name } - { item.al.name }</span>
        </div>
      </li>
    ))

    const onScroll = (pos) => {
      const posY = pos.y
      // 图片拉伸
      if (pos > 0) {
      } else if (Math.abs(posY) <= imgWrapper.value.clientHeight) {
      }
    }

    onMounted(() => {
      getSingerInfoRequest(id).then((res) => {
        state.artist = res.artist
        state.hotSongs = res.hotSongs

        refreshList()
      })
    })

    return () => (
      <div className="singer-detail">
        <div className="img-wrapper" ref={imgWrapper} style={{ backgroundImage: `url(${state.artist.picUrl})` }} />
        <Scroll scrollY onScroll={onScroll} ref={scrollRef} height={`calc(100% - ${state.height}px)`}>
          <ul className="host-songs">
            { renderHostSongs() }
          </ul>
        </Scroll>
      </div>
    )
  }
})